<template>
  <div class="file-upload-container">
    <!-- 文件拖拽上传部分 -->
    <div class="upload-section">
      <el-upload
        class="upload"
        :drag="true"
        :action="uploadUrl"
        :show-file-list="true"
        :before-upload="beforeUpload"
        :on-change="onFileChange"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
      >
        <i class="el-icon-upload"></i>
        <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>

    <h3>文件列表</h3>
    <el-table :data="files" style="width: 100%">
      <el-table-column prop="name" label="文件名" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" @click="downloadFileHandler(scope.row.name)">下载</el-button>
          <el-button type="danger" @click="deleteFileHandler(scope.row.name)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { uploadFile, downloadFile, deleteFile, listFiles } from '@/api/system/image.js';

export default {
  data() {
    return {
      files: [], // 文件列表
      uploadUrl: 'dev-api/system/minio/upload' // 设定文件上传的url，需根据您的实际情况修改
    };
  },

  methods: {
    // 文件上传前的钩子函数
    beforeUpload(file) {
      return true; // 返回true允许上传
    },

    // 处理文件变化（包含上传成功的文件）
    onFileChange(file, fileList) {
      // 可以在这里处理文件变化后的逻辑，如更新文件列表等
      this.files = fileList; // 更新文件列表
    },

    // 处理上传成功后的回调
    handleUploadSuccess(response, file) {
      this.$message.success(`${file.name} 上传成功`);
    },

    // 处理上传失败后的回调
    handleUploadError(err, file) {
      this.$message.error(`${file.name} 上传失败`);
    },

    // 获取文件列表
    async fetchFileList() {
      try {
        const response = await listFiles();
        this.files = response.data; // 更新文件列表
      } catch (error) {
        console.error(error);
        this.$message.error('获取文件列表失败');
      }
    },

    // 下载文件处理
    async downloadFileHandler(fileName) {
      try {
        const response = await downloadFile(fileName);
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName); // 设定下载文件的名称
        document.body.appendChild(link);
        link.click();
        link.remove();
      } catch (error) {
        console.error(error);
        this.$message.error('文件下载失败');
      }
    },

    // 删除文件处理
    async deleteFileHandler(fileName) {
      if (this.$confirm(`确定要删除 ${fileName} 吗？`)) {
        try {
          await deleteFile(fileName);
          this.$message.success('文件删除成功');
          await this.fetchFileList(); // 重新获取文件列表
        } catch (error) {
          console.error(error);
          this.$message.error('文件删除失败');
        }
      }
    },

  },

  mounted() {
    this.fetchFileList(); // 组件挂载时获取文件列表
  }
};
</script>

<style scoped>
.file-upload-container {
  padding: 20px;
}

.upload-section {
  margin-bottom: 20px;
}

h2 {
  color: #333;
}

.upload {
  border: 2px dashed #409EFF; /* 拖拽区域的边框样式 */
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.upload-text {
  margin-top: 10px;
  color: #999;
}
</style>
